<template>
	<view class="container">
		<!-- 搜索框 -->
		<view class="searchInput">
			<u-search placeholder="搜索内容..." clearabled :showAction="showAction" height="20">
			</u-search>
			<text class="searchText" @click="returnIndex">取消</text>
		</view>

		<p class="line"></p>

		<text style='display: flex;
    justify-content: center;margin-top: 50rpx;font-size: 24rpx;color:darkgray;'> 搜索指定内容 </text>
		<p style="  border-top: 5px solid #eee; margin-top:40rpx"></p>
		<view class="popularSearch">
			<view>
				<text style="font-size: 24rpx;color:darkgray;">热门搜索</text>
			</view>
			<view class="service">
				<text style="width: 320rpx;padding:10rpx;font-size: 28rpx;" v-for="item in list">
					{{item}}
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showAction: false,
				list: [
					'社区服务',
					'国家服务',
					'社会服务',
					'家政服务',
					'社会服务',
					'家政服务', '社会服务',
					'家政服务', '社会服务',
					'家政服务',
					'学校服务'
				]
			}
		},
		methods: {
			returnIndex() {
				uni.switchTab({
					url:'/pages/index/index'
				})  
			}
		}
	}
</script>

<style lang="scss">
	.container {
		.searchInput {
			padding: 40rpx 20rpx;
			display: flex;

			.searchText {
				color: firebrick;
				padding: 5rpx 0 5rpx 20rpx;
				font-size: 28rpx;
			}
		}

		.line {
			border-bottom: 1px solid #eee;
		}

		.popularSearch {
			margin: 10px;
		}

		.service {
			display: flex;
			flex-wrap: wrap;
			// justify-content: space-between;
		}
	}
</style>
